<template>
	<div class="page-container">
		<h1>随机字符串生成工具</h1>
		<el-form :model="form" label-position="top">
			<el-form-item label="随机字符串个数">
				<el-input v-model.number="form.count" type="number" :min="1" placeholder="请输入随机字符串个数"></el-input>
			</el-form-item>
			<el-form-item label="随机字符串长度">
				<el-input v-model.number="form.length" type="number" :min="1" placeholder="请输入随机字符串长度"></el-input>
			</el-form-item>
			<el-form-item label="包含小写字母">
				<el-switch v-model="form.lowercase"></el-switch>
			</el-form-item>
			<el-form-item label="包含大写字母">
				<el-switch v-model="form.uppercase"></el-switch>
			</el-form-item>
			<el-form-item label="包含数字">
				<el-switch v-model="form.number"></el-switch>
			</el-form-item>
			<el-form-item label="包含标点符号">
				<el-switch v-model="form.punctuation"></el-switch>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="generateRandomStrings">生成随机字符串</el-button>
			</el-form-item>
		</el-form>
		<el-form label-position="top">
			<el-form-item label="输出">
				<el-input v-model="randomStrings.join(', ')" readonly></el-input>
			</el-form-item>
		</el-form>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					count: 4,
					length: 8,
					lowercase: true,
					uppercase: false,
					number: true,
					punctuation: true
				},
				randomStrings: []
			};
		},
		methods: {
			generateRandomStrings() {
				const {
					count,
					length,
					lowercase,
					uppercase,
					number,
					punctuation
				} = this.form;
				let generatedStrings = [];

				const charset = (lowercase ? 'abcdefghijklmnopqrstuvwxyz' : '') +
					(uppercase ? 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' : '') +
					(number ? '0123456789' : '') +
					(punctuation ? '!@#$%^&*()-_+=~`[]{}\\|;:\'",.<>/?' : '');

				for (let i = 0; i < count; i++) {
					let randomString = '';
					for (let j = 0; j < length; j++) {
						randomString += charset.charAt(Math.floor(Math.random() * charset.length));
					}
					generatedStrings.push(randomString);
				}

				this.randomStrings = generatedStrings;
			}
		}
	};
</script>
